<template>
	<view class="">
		<!-- 顶部标题 -->
		<!-- <view class="head_text">
			<text>项目统计</text>
		</view> -->
		<!-- 搜索栏 -->
		<view class="search_bar">
			<view class="search_left" @click="select()">
				<image src="../../../../static/client/shaixuan.png" class="search_left_img"></image>
			</view>
			<input class="search_bar_input" v-model="searchInfo" placeholder="标题内容搜索"
				placeholder-class="search_input_text" />
			<!-- <image src="../../../../static/client/sousuo.png" class="sousuo_img" @click="handleSearch"></image> -->
			<view class="all_sousuo_img" @click="handleSearch">
				<image src="../../../../static/client/sousuo.png"
					style="width: 38rpx;height: 34rpx;margin-top: 20rpx;margin-left: 20rpx;"></image>
			</view>
		</view>

		<!-- 统计信息展示条目 -->
		<view class="stat_item" v-for="item in projectList" @click="goStatDetail(item)">
			<view class="item1">
				<text class="text1">{{item.nickname}}</text>
				<text class="text2" style="margin-left: 13rpx;">{{item.department_name}}</text>
				<text class="text2" style="margin-left: 42rpx;">完成项目:</text>
				<text class="text3" style="margin-left: 10rpx;">{{item.count1}}</text>
				<text class="text2" style="margin-left: 41rpx;">正在进行的项目:</text>
				<text class="text3" style="margin-left: 10rpx;">{{item.count3}}</text>
			</view>
			<view class="item2">
				<view class="" style="width: 200rpx;" v-for="i in item.evaluation">
					<text class="text4">{{i}}</text>
				</view>
			</view>
		</view>

		<!-- 筛选查询框 -->
		<view class="select_query" v-if="select_query">

			<!-- 部门选择 -->
			<view class="select_query_text" style="margin-top: 62rpx;">部门选择</view>
			<view class="select_input" style="margin-top: -50rpx;" @click="getDepartment()">
				<text class="select_input_text">{{ department_name }}</text>
				<image src="../../../../static/client/xiala.png"
					style="width: 20rpx;height: 11rpx;position: absolute; right: 30rpx; top: 30rpx;"></image>
			</view>
			<!-- 部门选择下拉列表 -->
			<view class="project_item" style="" v-if="proItemShow1">
				<view class="item_info" v-for="(item, index) in department_list" @tap="tapProItem1(item)">
					<text style="margin-left: 21rpx;">{{ item.department_name }}</text>
				</view>
			</view>
			<!-- 人员选择 -->
			<view class="select_query_text" style="margin-top: 62rpx;">人员选择</view>
			<view class="select_input" style="margin-top: -50rpx;" @click="userSelectShow()">
				<text class="select_input_text">{{ insider }}</text>
				<image src="../../../../static/client/xiala.png"
					style="width: 20rpx;height: 11rpx;position: absolute; right: 30rpx; top: 30rpx;"></image>
			</view>
			<!-- 多层部门人员选择 -->
			<view class="user_select_plus" v-show="insider_select_show">
				<view class="tab_line">
					<scroll-view scroll-x="true" enhanced="true" style="white-space: nowrap;">
						<view class="tab_item" v-for="(item,index) in userSelectTabLine"
							:style="item.show_name == userSelectTabLine[userSelectTabLine.length-1].show_name ?'color: #128bf1;':''"
							@click="tapSelectTab(item,index)">
							{{item.show_name}}
						</view>
					</scroll-view>
				</view>

				<view class="user_select_show">
					<scroll-view scroll-y="true" style="height: 360rpx;">
						<view v-for="item in userSelectList" class="select_item" @click="tapSelector(item)"
							:style="item.is_department == 1?'color:#128bf1':''">
							{{item.show_name}}
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 多层部门人员选择结束 -->


			<!-- 模糊查询 -->
			<!-- <view class="select_query_text" style="margin-top: 62rpx;">模糊查询</view>
			<input type="text" class="select_input" name="input2"
				style="margin-top: -50rpx; font-size: 26rpx;color: #666;" placeholder="请输入" v-model="searchInfo"
				placeholder-class="placeholderclass" /> -->
			<!-- 模糊查询结束 -->
			<!-- 取消确定按钮 -->
			<view style="margin-top: 65rpx;">
				<button class="query_button_cancel" @click="handelCancel" style="">取消</button>
				<button class="query_button_confirm" @click="handleSearchClick" style="">
					筛选
				</button>
			</view>

			<!-- 筛选框评价人员选择 -->
		</view>
		<!-- 筛选查询框结束 -->


		<!-- 加载更多 -->
		<view style="width: 100%;height: 200rpx;">
			<uni-load-more :status="status" iconType="auto" @clickLoadMore="getMoreProject"></uni-load-more>
		</view>

		<!-- 右下添加按钮 -->
		<project-add></project-add>
	</view>
</template>

<script>
	import ProjectAdd from '@/components/project-add.vue';
	export default {
		components: {
			ProjectAdd
		},
		data() {

			return {
				token: '',
				member_id: '',
				company_id: '',
				select_query: false,
				user_select: false,
				reviewers: '',
				projectList: '',
				searchInfo: '',
				pageNum: 0,
				totle: 0,
				status: 'more',
				cache_department_id: '',
				// ******人员选择*******
				// -------多级人员选择
				userSelectTabLine: [{
					show_name: '部门选择'
				}],
				userSelectList: [],
				
				selectClassId: '',
				userList: [],
				insider: '', //内部业务人员
				insiderId: '', //内部业务人员Id
				insider_select_show: false,
				insider_user: [],
				proItemShow1:false,//部门下拉列表展示
				department_list:[],//部门列表
				department_name:'',
				department_id:''
				
			}
		},
		onShow() {},
		async onLoad() {
			this.token = uni.getStorageSync('btlh_process_token') || '';
			this.member_id = uni.getStorageSync('btlh_process_member_id') || '';
			this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || '';
			this.company_name = uni.getStorageSync('bthl_process_LoginCompanyName') || '';
			this.cache_department_id = uni.getStorageSync('cache_department_id') || '';
			this.getProjectList();
			this.getUserList();
		},
		methods: {
			// 点击搜索
			handleSearch(){
				this.getProjectList();
			},
			// 点击取消
			handelCancel(){
				this.department_name = '';
				this.department_id = '';
				this.insider = '';
				this.insiderId = '';
				this.searchInfo = '';
				this.select_query = false;
			},
			// 点击筛选
			handleSearchClick(){
				this.getProjectList();
				this.select_query = false;
			},
			// 点击部门
			tapProItem1(item){
				console.log(item)
				this.department_name = item.department_name;
				this.department_id = item.department_id;
				this.proItemShow1 = false;
			},
			// 获取部门
			async getDepartment() {
				if(this.proItemShow1){
					this.proItemShow1 = false;
					return
				}
				
				const {
					data: res
				} = await this.$myRequest({
					url: 'Management/department',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,
					}
				});
				this.department_list = res.datas.listInfo;
				this.department_list.push(
				{department_id:'',
				department_name:'全部'}
				)
				this.insider_select_show = false;
				this.proItemShow1 = true;
			},

			// 跳转详情页
			goStatDetail(val) {
				uni.navigateTo({
					url: 'statDetail?meber_id=' + val.member_id + '&nickname=' + val.nickname
				})
			},
			// 点击搜索
			handleSearch() {
				uni.showLoading({
					title: '请求中~~'
				});
				this.getProjectList()
			},
			// tab点击
			tapSelectTab(item, index) {
				// 判断是否点击第一个元素
				if (index == 0) {
					this.userSelectList = this.userList;
					this.userSelectTabLine = [{
						show_name: '部门选择'
					}]
				} else {
					this.userSelectTabLine = this.userSelectTabLine.slice(0, index + 1);
					this.userSelectList = item.children;
				}
			},
			
			// 多级列表点击
			tapSelector(item) {
				// 0不是部门 1是部门
				if (item.is_department == 0) {
					this.insider = item.show_name;
					this.insiderId = item.id;
					this.insider_select_show = false;
				} else if (item.is_department == 1) {
					this.userSelectList = item.children;
					console.log('reverse')
					//判断如果部门已加入tab栏则不加入
					if (!this.userSelectTabLine.includes(item)) {
						this.userSelectTabLine.push(item);
					}
				}
			},

			// 获取人员列表
			async getUserList() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'Management/simple_member',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id
					}
				});
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				this.userList = res.datas.listInfo;
				this.userSelectList = this.userList;
				// 数组反转将部门放在前
				for (let i = 0; i < this.userSelectList.length; i++) {
					this.userSelectList[i].children.reverse();
				}


				console.log('用户列表(选择框)', this.userList);
			},
			// 获取项目列表
			async getProjectList() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'Management/project_statistics',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,
						department_id: this.department_id,
						to_member_id:this.insiderId,
						p: 1,
						p_count: 10 + this.pageNum * 5,

						search: this.searchInfo,
						// 通过项目类型搜索项目字段(只改键名)
						// xxxxxxxx: this.search_project_type,
					}
				});
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				this.projectList = res.datas.listInfo;
				this.totle = parseInt(res.datas.count);
				console.log('项目列表', this.projectListevaluation);
			},

			// 点击查看更多
			getMoreProject() {
				if (this.totle > this.projectList.length) {
					this.status = 'loading';
					this.pageNum++;
					console.log('加载更多1')
					this.getProjectList(); //执行的方法
					this.status = 'more';
				} else {
					//停止加载
					this.status = 'noMore';
					console.log('加载更多2')
				}
			},
			bindStartDateChange(e) {
				this.startDate = e.detail.value
			},
			bindEndDateChange(e) {
				this.endDate = e.detail.value
			},
			// 点击选择人员
			userSelectShow() {
				this.insider_select_show = !this.insider_select_show;
				this.proItemShow1 = false;
			},
			// 点击撒筛选查询
			select() {
				this.select_query = !this.select_query
			},
			/*
			 设置评价人员
			 */
			setPerson(item) {
				this.reviewers = item
				this.user_select_show = false
			},
			/* 
			 获取评价人员
			 */
			getPerson(item) {
				for (let i = 0; i < this.department.length; i++) {
					this.department[i].style = ''
				}
				switch (item.id) {
					case 0:
						this.department_user = this.anping
						item.style = 'color:#1A8FF1;'
						break;
					case 1:
						this.department_user = this.zhiping
						item.style = 'color:#1A8FF1;'
						break;
					case 2:
						this.department_user = this.huanping
						item.style = 'color:#1A8FF1;'
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}
	.project_item {
		width: 550rpx;
		// height: 296rpx;
		background: #ffffff;
		box-shadow: 2rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		position: absolute;
		top: 130rpx;
		right: 30rpx;
		z-index: 999;
	
		.item_info {
			width: 100%;
			height: 60rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 60rpx;
		}
	}

	// 多层部门人员选择
	.user_select_plus {
		width: 550rpx;
		height: auto;
		position: absolute;
		background: #ffffff;
		top: 245rpx;
		left: 170rpx;
		z-index: 999;
		border-radius: 10rpx;
		box-shadow: 2rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);

		// 顶部选择栏
		.tab_line {
			width: 100%;
			display: flex;
			border-bottom: 1rpx solid #E4E7ED;

			.tab_item {
				height: 70rpx;
				display: inline-block;
				line-height: 70rpx;
				margin-left: 30rpx;
				font-size: 28rpx;
			}
		}

		// 内容展示框
		.user_select_show {

			.select_item {
				height: 60rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #E4E7ED;
				font-size: 26rpx;
				padding-left: 30rpx;
			}
		}
	}

	.stat_item {
		border-bottom: 5rpx solid #F7F7F7;

		.item1 {
			width: 690rpx;
			height: 90rpx;
			margin-left: 30rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
		}

		.item2 {
			width: 690rpx;
			height: auto;
			margin-left: 30rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			// align-items: center;
		}

		.text1 {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #128BF1;
		}

		.text2 {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}

		.text3 {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #128BF1;
		}

		.text4 {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}

		.text5 {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #128BF1;
		}
	}

	// 人员选择
	.user_select {
		width: 550rpx;
		height: 357rpx;
		background: #FFFFFF;
		box-shadow: 2rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 10rpx;
		overflow: hidden;
		position: absolute;
		left: 170rpx;
		z-index: 100;

		.firm_name {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			text-align: center;
			margin-top: 21rpx;
		}

		.department {
			width: 288rpx;
			margin-left: 41rpx;
		}

		.person {
			width: 261rpx;
			margin-left: 41rpx;
		}

		.info_text {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-bottom: 30rpx;
		}

		.user_name {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-bottom: 30rpx;
		}
	}

	.file_bnt {
		width: 137rpx;
		height: 137rpx;
		position: fixed;
		left: 592rpx;
		bottom: 120rpx;
		z-index: 5;

		image {
			width: 137rpx;
			height: 137rpx;
		}
	}

	.placeholderclass {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.select_input {
		width: 530rpx;
		height: 60rpx;
		background: #FFFFFF;
		border: 1rpx solid #DFDFDF;
		border-radius: 10px;
		margin-left: 170rpx;
		line-height: 60rpx;
		padding-left: 22rpx;

		.select_input_text {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
	}


	.query_button_confirm {
		width: 375rpx;
		height: 80rpx;
		background: linear-gradient(0deg, #40A0F2 0%, #128BF1 100%);
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		border-radius: 0;
		margin-right: 0;
		margin-top: -80rpx;
	}

	.query_button_cancel {
		width: 385rpx;
		height: 80rpx;
		border-radius: 0px;
		margin-left: 0;
		background: #FFFFFF;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.select_input {
		width: 530rpx;
		height: 60rpx;
		background: #FFFFFF;
		border: 1rpx solid #DFDFDF;
		border-radius: 10px;
		margin-left: 170rpx;
		line-height: 60rpx;
		padding-left: 22rpx;
		position: relative;

		.select_input_text {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
	}

	.picker_input {
		width: 250rpx;
		height: 60rpx;
		background: #FFFFFF;
		border: 1px solid #DFDFDF;
		border-radius: 10rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 60rpx;
		text-align: center;
		margin-left: 170rpx;
		margin-top: -48rpx;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.select_query {
		width: 100%;
		height: auto;
		background: #fff;
		position: absolute;
		top: 95rpx;
		padding-top: 20rpx;
		box-shadow: 1px 3px 15px 0px rgba(3, 70, 126, 0.2);

		.select_query_text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-left: 30rpx;
		}
	}




	.search_left_img {
		width: 46rpx;
		height: 36rpx;
		padding: 28rpx 30rpx;
	}

	.search_left {
		width: 106rpx;
		height: 92rpx;
		background: #40A0F2;
	}

	.search_bar {
		width: 100%;
		height: 92rpx;
		position: relative;
		border-bottom: 20rpx solid #F7F7F7;

		.search_bar_input {
			width: 450rpx;
			height: 72rpx;
			background: #F7F7F7;
			border: 1rpx solid #F7F7F7;
			border-radius: 36rpx 0 0 36rpx;
			margin-left: 136rpx;
			padding-left: 20rpx;
			position: absolute;
			top: 10rpx;
			font-size: 26rpx;

			.search_input_text {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #B2B2B2;
				line-height: 37px;
				margin-left: 31rpx;
			}
		}

		.sousuo_img {
			width: 38rpx;
			height: 34rpx;
			position: absolute;
			top: 28rpx;
			left: 650rpx;
			z-index: 99;
		}
	}

	.head_text {
		width: 100%;
		height: 128rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 128rpx;
		text-align: center;
		border: 1rpx solid #F7F7F7;

	}

	.selectSlideItemActive {
		background: #40A0F2;
		color: #FFFFFF;
		border-radius: 10px 10px 0 0;
	}
</style>
